<section class="tlp-pane project-admin-details-hierarchy">
    <div class="tlp-pane-container">
        <div class="tlp-pane-header">
            <h3 class="tlp-pane-title">{{ project_hierarchy_title }}</h3>
        </div>
        <section class="tlp-pane-section">
            <p class="project-admin-details-hierarchy-description">
                {{ project_hierarchy_desc }}
            </p>

            <div class="project-admin-details-hierarchy-buttons">
                <div class="tlp-form-element tlp-form-element-append">
                    <select
                        name="parent_project"
                        id="project-admin-details-hierarchy-project-select"
                        class="tlp-select tlp-select-adjusted"
                        size="50"
                        data-placeholder="{{ project_name_label }}"
                        {{# parent_project_info }}disabled{{/ parent_project_info }}
                    ></select>
                    <button class="tlp-append tlp-button-primary tlp-button-outline"
                            {{# parent_project_info }}disabled{{/ parent_project_info }}
                    >
                        <i class="fa fa-plus tlp-button-icon"></i> {{ add_parent_button }}
                    </button>
                </div>

                {{# parent_project_info }}
                    <button
                        type="button"
                        id="project-admin-details-hierarchy-delete-button"
                        class="tlp-button tlp-button-danger tlp-button-outline"
                        data-target-modal-id="project-administration-delete-confirmation"
                    >
                        <i class="fa fa-trash-o tlp-button-icon"></i> {{ delete_button }}
                    </button>

                    {{> project-hierarchy-delete-modal }}
                {{/ parent_project_info }}
            </div>

            {{# parent_project_info }}
                <div class="tlp-property">
                    <label class="tlp-label">{{ parent_project_label }}</label>
                    <p class="tlp-text-muted">
                        <a href="{{ url }}">{{ parent_name }}</a>
                    </p>
                </div>
            {{/ parent_project_info }}

        </section>
        <section class="tlp-pane-section">
            <div class="tlp-property">
                <label class="tlp-label">{{ child_projects_label }}</label>
                <p class="tlp-text-muted">
                    {{# purified_project_children }}
                        {{{ purified_project_children }}}
                    {{/ purified_project_children }}
                    {{^ purified_project_children }}
                        {{ empty_children_label }}
                    {{/ purified_project_children }}
                </p>
            </div>
        </section>
    </div>
</section>
